﻿@model  WorkBasket.Areas.Admin.Models.DesignVM
@{
    ViewBag.Title = "Workflow Design";
}
@section scripts{

    <script src="~/Scripts/app/UI/design/WFTree.js" type="text/javascript"></script>
    <script src="~/Scripts/app/UI/Design/design.js" type="text/javascript"></script>


}
<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h1>Processing...</h1>
    </div>
    <div class="modal-body">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 100%;"></div>
        </div>
    </div>
</div>


<h2>Workflow Design </h2>
<div class="row">
    <div class="col-md-12">
        <div class="well-lg">
            <label class="label label-default">Select Workflow</label>
            <div data-bind="if: Workflows()">
                <select class="form-control" data-bind="options:Workflows(),
                                optionsText:function(item){return item.WorkflowName},
                                value:SelectedWorkflow,
                                WFChange:SelectedWorkflow"></select>

            </div>

            <button type="button" class="btn btn-success" data-bind="click: $root.AddWorkflow">Create New Workflow</button><!-- -->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">

        <div class="panel panel-default">
            <div data-bind="if: SelectedWorkflow()">
                <label class="label label-default">Selected Workflow</label>
                <div class="panel panel-heading" data-bind="text:$root.SelectedWorkflow().WorkflowName()"> </div>
                <div class="panel panel-body">
                    <!-- Panel BODY-->

                    <ul class="nav nav-tabs">
                        <li><a href="#Workflow" class="tab active" data-toggle="tab">Workflows</a></li>
                        <li><a href="#Fields" data-toggle="tab">Fields</a></li>

                        <li><a href="#Steps" data-toggle="tab">Process</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" id="MyTab">

                        <div class="tab-pane fade" id="Workflow">
                            <div class="panel panel-default" id="Fieldstplt">
                                <div class="panel-heading">Workflow</div>
                                <div class="panel-body">
                                    <label class="label label-default">Workflow Name</label>
                                    <input class="form-control" data-bind="value:$root.SelectedWorkflow().WorkflowName,event: { change: UpdateWorkflow }" />
                                    <button type="button" class="btn btn-danger" data-bind="click: function(){$root.DeleteWorkflow(this)}">Delete Workflow</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Fields">
                            <div class="panel panel-default" id="Fieldstplt">
                                <div class="panel-heading">Fields</div>
                                <div class="panel-body">

                                    <table class="table table-hover table-bordered table-condensed table-striped">
                                        <thead>
                                            <tr><th>ID</th><th>Fields</th><th>Field Type</th><th>Info</th><th>Actions</th></tr>
                                        </thead>
                                        <tbody data-bind="foreach:$root.SelectedWorkflow().Fields()">
                                            <tr>
                                                <td><label class="form-control" data-bind="text:FieldID"></label></td>
                                                <td>
                                                    <input class="form-control" data-bind="value:FieldName,event:{change:$root.UpdateField}" />
                                                </td>
                                                <td>
                                                    <select class="form-control" data-bind="options:$root.FieldTypes,value:FieldType,event:{change:$root.UpdateField}" />
                                                </td>
                                                <td>
                                                    <input class="form-control" data-bind="value:FieldInfo,event:{change:$root.UpdateField}" />
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-default" data-bind="click: function(){$root.DeleteField(this)}">Delete</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div>
                                        <input type="text" class="form-control" data-bind="value:$root.NewField" />
                                        <button type="button" class="btn btn-default" data-bind="click: $root.AddField">Add</button>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="Steps">
                            <div class="panel panel-default" id="Stepstplt">
                                <div class="panel-heading">Process</div>
                                <div class="panel-body">



                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="well-lg">
                                                <table class="table table-hover table-bordered table-condensed table-striped">
                                                    <thead>
                                                        <tr><th>ID</th><th>Name</th><th>EffectiveDate</th><th>Delete</th><th>Select</th></tr>
                                                    </thead>
                                                    <tbody data-bind="foreach:$root.SelectedWorkflow().ProcessVersions()">
                                                        <tr>
                                                            <td><label class="form-control" data-bind="text:ProcessVersionID"></label></td>
                                                            <td>
                                                                <input class="form-control" data-bind="value:VersionName,event:{change:$root.UpdateProcessVersion}" />
                                                            </td>
                                                            <td>
                                                                <input class="form-control datepicker" data-bind="value:EffectiveDate,event:{change:$root.UpdateProcessVersion}" />
                                                            </td>
                                                            <td>
                                                                <button type="button" class="btn btn-default" data-bind="click: function(){$root.SelectProcessVersion(this)}">Select</button>
                                                            </td>
                                                            <td>
                                                                <button type="button" class="btn btn-danger" data-bind="click: function(){$root.DeleteVersion(this)}">Delete</button>
                                                            </td>

                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <input class="form-control" data-bind="value:NewProcessVersion" />
                                                <button class="btn btn-success" data-bind="click:AddProcessVersion">Create New Process Version</button>

                                            </div>

                                        </div>
                                    </div>


                                    <div class="row">

                                        <div class="col-md-4">

                                                <nav class="navbar navbar-default" role="navigation">
                                                    <div class="navbar-form navbar-left">
                                                        <button data-bind="click: function(){$root.AddRootNode()}" class="btn btn-default">
                                                            <span class="glyphicon glyphicon-flag"></span>
                                                        </button>
                                                    </div>
                                                </nav>
                                                <div id="jstree" class="WFArea">
                                                    <ul></ul>
                                                </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">Properties</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <label class="form-control">Name</label>
                                                    <input class="form-control" />
                                                    <label class="form-control">Form View</label>
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-btn"><button id="ButtonAddForm" class="btn btn-default btn-sm" onclick="" title="Add Form"><span class="glyphicon glyphicon-plus"></span></button></span>
                                                        <select class="form-control">
                                                            <option>View 1</option>
                                                            <option>View 2</option>
                                                        </select>
                                                        </div>
                                               </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">Permissions</h3>
                                                </div>
                                                <div class="panel-body">

                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                                            Anyone
                                                        </label>
                                                    </div>
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                            Group:
                                                        </label>


                                                    </div>
                                                    <select class="form-control">
                                                        <option>Group 1</option>
                                                        <option>Group 2</option>
                                                    </select>
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                            Individual:
                                                        </label>
                                                    </div>

                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-btn"><button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Search"><span class="glyphicon glyphicon-search"></span></button></span>
                                                        <input type="text" class="form-control">

                                                    </div>
                                                </div>






                                            </div>
                                        </div>



                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end Panel Body-->
                    </div>


                </div>
            </div>
        </div>
